<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/detail.css">
    <title>产品详情</title>
</head>
<body>
    <!-- 头部 -->
    <header>
        <!-- 头部占位容器 -->
        <div class="hd-placeholder"></div>
        <div class="top">
            <div class="Back">
                <h1>Back</h1>
            </div>
            <div class="detail">
                <h2>产品详情</h2>
            </div>
            <div class="star">
                <img src="./image/detail/形状-9.png" alt="">
            </div>
        </div>
        <!-- 大图片商品详情 -->
        <div class="banner">
            <div class="img-bg"></div>
            <div class="price">
                <div><span>￥ 32</span></div>
                <div><button>购买</button></div>
            </div>
            <div class="evaluate">
                <div>
                    <img src="./image/detail/形状-9.png" alt="">
                    <span>好评度</span>
                    <span>99%</span>
                </div>
                <div>
                    <span>共605个评价&gt;</span>
                </div>
            </div>
        </div>
    </header>
    <!-- 商店列表 -->
    <section>
        <div class="centent">
            <div class="top"><span>适用用户</span></div>
            <!-- 正佳店 -->
            <div class="list-1">
                <div><span>正佳店</span></div>
                <ul>
                    <li>万岁寿司（正佳店）</li>
                    <li>
                        <img src="./image/detail/形状-9.png" alt="">
                        <img src="./image/detail/形状-9.png" alt="">
                        <img src="./image/detail/形状-9.png" alt="">
                        <img src="./image/detail/形状-9.png" alt="">
                        <img src="./image/detail/形状-9.png" alt="">
                        <span>10分</span>
                    </li>
                    <li>离你100m</li>
                    <li><a href="">查看详情&gt; &gt;</a></li>
                </ul>
                <button>进入</button>
            </div>
            <!-- 体育西店 -->
            <div class="list-2">
                <div><span>体育西店</span></div>
                <ul>
                    <li>万岁寿司（体育西店）</li>
                    <li>
                        <img src="./image/detail/形状-9.png" alt="">
                        <img src="./image/detail/形状-9.png" alt="">
                        <img src="./image/detail/形状-9.png" alt="">
                        <img src="./image/detail/形状-9.png" alt="">
                        <img src="./image/detail/形状-9.png" alt="">
                        <span>10分</span>
                    </li>
                    <li>离你100m</li>
                    <li><a href="">查看详情&gt; &gt;</a></li>
                </ul>
                <button>进入</button>
            </div>
            <!-- 昌岗店 -->
            <div class="list-3">
                <div><span>昌岗店</span></div>
                <ul>
                    <li>万岁寿司（昌岗店）</li>
                    <li>
                        <img src="./image/detail/形状-9.png" alt="">
                        <img src="./image/detail/形状-9.png" alt="">
                        <img src="./image/detail/形状-9.png" alt="">
                        <img src="./image/detail/形状-9.png" alt="">
                        <img src="./image/detail/形状-9.png" alt="">
                        <span>10分</span>
                    </li>
                    <li>离你100m</li>
                    <li><a href="">查看详情&gt; &gt;</a></li>
                </ul>
                <button>进入</button>
            </div>
        </div>
    </section>
    <!-- 页脚导航栏 -->
    <footer>
        <div class="ft-placeholder"></div>
        <div class="nav">
            <a href="./index.html">
                <img src="./image/discover/首页1.png" alt="">
                <span>首页</span>
            </a>
            <a href="./classify.html">
                <img src="./image/index/分类4.png" alt="">
                <span>分类</span>
            </a>
            <a href="./discover.html">
                <img src="./image/index/广场.png" alt="">
                <span>发现</span>
            </a>
            <a href="./my.html">
                <img src="./image/index/我的.png" alt="">
                <span>我的</span>
            </a>
        </div>
    </footer>
</body>
</html>